<template>
  <!-- 登陆和注册 -->
  <div class="lx-login__page flex flex--c">
    <div class="lx-login__panel">
      <div
        class="form-container is-login"
        :class="[!isLogin ? 'is-hiden' : 'is-show']"
      >
        <div class="center-box">
          <h1>登录</h1>
          <input
            v-model="form.userName"
            type="text"
            placeholder="用户名"
            class="lx-login__input"
          />
          <input
            v-model="form.password"
            type="password"
            placeholder="密码"
            class="lx-login__input"
          />
          <a href="#" class="lx-login__link">忘记密码？</a>
          <button class="submit-btn" @click="login">登录</button>
        </div>
      </div>
      <div
        class="form-container is-register"
        :class="[isLogin ? 'is-hiden' : 'is-show']"
      >
        <div class="center-box">
          <h1>注册</h1>
          <input
            v-model="form.userName"
            type="text"
            maxlength="30"
            placeholder="用户名"
            class="lx-login__input"
          />
          <input
            v-model="form.password"
            type="password"
            maxlength="30"
            placeholder="密码"
            class="lx-login__input"
          />
          <input
            v-model="form.nickName"
            maxlength="30"
            placeholder="昵称"
            class="lx-login__input"
          />
          <input
            v-model="form.phonenumber"
            maxlength="30"
            placeholder="手机号"
            class="lx-login__input"
          />
          <input
            v-model="form.email"
            maxlength="30"
            placeholder="邮箱"
            class="lx-login__input"
          />
          <!-- <input type="email" placeholder="邮箱" class="lx-login__input" /> -->
          <!-- <input
            type="text"
            placeholder="验证码"
            disabled
            class="lx-login__input"
          />
          <a href="#" class="lx-login__link">获取验证码</a> -->
          <button class="submit-btn" @click="register">注册</button>
        </div>
      </div>
      <div
        class="overlay-container"
        :class="[isLogin ? 'is-login' : 'is-register']"
      >
        <div class="overlay-panel overlay-left" v-if="!isLogin">
          <h1>已有帐号？</h1>
          <p class="lx-login__tip">请登录🚀</p>
          <button class="lx-login__btn--switch" @click="switchType()">
            登录
          </button>
        </div>
        <div class="overlay-panel overlay-right" v-else>
          <h1>没有帐号？</h1>
          <p class="lx-login__tip">立即注册吧😃</p>
          <button class="lx-login__btn--switch" @click="switchType()">
            注册
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useLogin } from "./hooks/useLogin";
const { form, isLogin, login, register, switchType } = useLogin();
</script>

<style scoped lang="scss">
.lx-login__page {
  width: 100%;
  height: calc(100% - var(--lx-footer-height));
  background-image: url("http://img.xjlyh.site/2023/09/08/10aed6982af2440c8f9e54fe62e5241b.jpg");
  background-size: cover;
}
.lx-login__panel {
  width: 750px;
  height: 450px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.7), 0 10px 10px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  .form-container,
  .overlay-container {
    width: 50%;
    height: 100%;
    position: absolute;
    transition: all 0.5s ease-in-out;
    bottom: 0;
  }
  .form-container {
    padding: 20px;
    &.is-register {
      right: 0;
    }
    &.is-login {
      left: 0;
    }
    &.is-show {
      transform: translateY(0);
    }
    &.is-hiden {
      transform: translateY(100%);
    }
    .center-box {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
    }
    .submit-btn {
      border-radius: 2rem;
      border: none;
      background: #ff4b2b;
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      padding: 12px 45px;
      letter-spacing: 2px;
      cursor: pointer;
    }
    .lx-login__input {
      background: #eee;
      border-radius: 2px;
      border: none;
      padding: 12px 15px;
      margin: 10px 0;
      width: 100%;
      outline: none;
    }
    .lx-login__link {
      color: #000;
      font-size: 14px;
      text-decoration: none;
      margin: 15px 0;
    }
  }
  .overlay-container {
    background: linear-gradient(90deg, #ff4b2b, #ff416c);
    height: 100%;
    color: #fff;
    width: 50%;

    &.is-login {
      left: 0;
      border-radius: 0 10px 10px 0;
      transform: translateX(100%);
    }
    &.is-register {
      right: 0;
      border-radius: 10px 0 0 10px;
      transform: translateX(-100%);
    }

    .lx-login__btn--switch {
      background: transparent;
      border: 1px solid #fff;
      border-radius: 2rem;
      background: transparent;
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      padding: 12px 45px;
      letter-spacing: 2px;
      cursor: pointer;
    }
    .lx-login__tip {
      font-size: 14px;
      letter-spacing: 1px;
      margin: 20px 0 30px 0;
    }
    .overlay-panel {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
  }
}
</style>
